<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="lib/echarts.min.js"></script>
</head>

<body>
  <div style="width: 600px;height:400px"></div>
  <script>
    var mCharts = echarts.init(document.querySelector("div"))
    var xDataArr = ['张三', '李四', '王五', '闰土', '小明', '茅台', '二妞', '大强']
    var yDataArr = [88, 92, 63, 77, 94, 80, 72, 86]
    var option = {
      animation: true,  // 控制动画是否开启
      // animationDuration: 7000, // 动画的时长, 它是以毫秒为单位
      animationDuration: function (arg) { //初始动画的时长。
        // 回调函数的作用：对不同的元素产生不同的动画时长的效果
        // 元素：柱、markPoint中点对象（最大值标注、最小值标注）、markLine中线对象（平均线）
        // args：对不同类别所产生动画效果的元素进行编号，编号从0开始
        console.log(arg)
        return 2000 * arg //编号不同的元素，动画的时长也不相同
      },
      // animationEasing: 'linear', //线性动画
      // bounceOut：动画带有回弹的效果
      animationEasing: 'bounceOut', // 缓动动画 初始动画的缓动效果
      animationThreshold: 8, // 动画元素的阈值。是否开启动画的阈值，当单个系列显示的图形数量大于这个阈值时会关闭动画。
      // 同一类动画效果的元素数量超过阈值时，动画关闭 8/2/1都小于80
      xAxis: {
        type: 'category',
        data: xDataArr
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          type: 'bar',
          data: yDataArr,
          markPoint: {
            data: [
              {  //对象索引为0，在animationDuration回调函数中编号也为0
                type: 'max', name: '最大值'
              },
              { //对象索引为1，在animationDuration回调函数中编号也为1
                type: 'min', name: '最小值'
              }
            ]
          },
          markLine: {
            data: [
              {
                type: 'average', name: '平均值'
              }
            ]
          },
          label: {
            show: true,
            rotate: 60
          },
          barWidth: '30%'
        }
      ]
    };
    mCharts.setOption(option)
  </script>
</body>

</html>